import React, { useMemo, PropsWithChildren } from "react";
import classnames from "classnames";
import { TooltipProps } from "antd";
import "./index.less";
import AppTooltip from "../AppTooltip";

interface IProps {
  type?: "default" | "content";
  padd?: number[];
  radius?: number;
  hovered?: boolean;
  className?: string;
  overlay?: TooltipProps["overlay"];
  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}

const HoverBolck: React.FC<PropsWithChildren<IProps>> = ({
  type = "default",
  children,
  padd,
  overlay,
  hovered,
  radius,
  className,
  onClick,
}) => {
  const contentStyle = useMemo(() => {
    let styleObj: any = {};
    if (radius !== undefined) {
      styleObj["borderRadius"] = `${radius}px`;
    }
    if (padd !== undefined) {
      const resStr = padd.map((i) => `${i}px`).join(" ");
      styleObj["padding"] = resStr;
    }
    return styleObj;
  }, [padd, radius, padd]);
  const resClass = classnames(
    {
      "app-hover-block": true,
      [`app-hover-block-${type}`]: true,
      "app-hover-block-hovered": hovered,
    },
    className
  );
  return (
    <AppTooltip overlay={overlay}>
      <div className={resClass} style={contentStyle} onClick={onClick}>
        {children}
      </div>
    </AppTooltip>
  );
};

export default HoverBolck;
